<template>
	<view class="index1_content">
		<!-- 公司名称 -->
		<view class="index1_headers">
			<image style="width: 100rpx;height: 100rpx;border-radius: 24rpx;flex:none;"
				:src="setImage(userInfoFull.avatar)" mode=""></image>
			<view class="index1_headers1">
				<view class="index1-username" @longpress="onLongPressUsername()" @touchend="onTouchEnd">
					Hello，{{lang=='zh'?userInfoFull.username:userInfoFull.username_ru}}</view>
				<view>
					<view class="sub_title">
						{{lang=='zh'?userInfoFull.identity_name:userInfoFull.identity_name_ru}}
					</view>
				</view>
			</view>
			<image class="business" src="@/static/index2/business.png" mode="widthFix" @click="handeleCard"></image>
		</view>
		<!-- 消息 -->
		<!-- <view class="index2_information">
			<image class="small_bell" src="@/static/index2/small_bell.png" mode="widthFix"></image>
			<view class="bell_text" v-if="lang=='zh'">
				<u-notice-bar mode="horizontal" padding="0 0" :list="list" bg-color="transparent;" type="none"
					:volume-icon="false"></u-notice-bar>
			</view>
			<view class="bell_text" v-if="lang!=='zh'">
				<u-notice-bar mode="horizontal" padding="0 0" :list="list" bg-color="transparent;" type="none"
					:volume-icon="false"></u-notice-bar>
			</view>
		</view> -->
		<!-- 导航 -->
		<view class="index1_ck">
			<view class="index1_ck_flex" @click="zhaohuo">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" class="index1_ck_imgblock_img"
						src="@/static/index2/index1_gys.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock':'textBlock_ru'">{{$t('找货')}}</view>
			</view>
			<view class="index1_ck_flex" @click="handeleMyOrder">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" class="index1_ck_imgblock_img"
						src="@/static/index2/index2_gys.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock':'textBlock_ru'">{{$t('我的订单')}}</view>
			</view>
			<view class="index1_ck_flex" @click="zhaoche">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" class="index1_ck_imgblock_img"
						src="@/static/index2/index3_gys.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock':'textBlock_ru'">{{$t('找车')}}</view>
			</view>
			<view class="index1_ck_flex" @click="zhaohuodai">
				<view class="index1_ck_imgblock">
					<image style="width: 60rpx;height: 60rpx;" class="index1_ck_imgblock_img"
						src="@/static/index2/index4_gys.png" mode="">
				</view>
				<view :class="lang=='zh'?'textBlock':'textBlock_ru'">{{$t('找货代')}}</view>
			</view>
		</view>
		<!-- 采购 -->
		<!-- <view class="index1_yunshu">
			<view class="index1_yunshu1" @click="handelePurchase">
				<image class="yunshu_images2" src="@/static/index2/list_01.png" mode=""></image>
				<view class="index1_myyunshu">{{$t('采购计划')}}</view>
			</view>
			<view class="index1_yunshu1" @click="handeleMyOrder">
				<image class="yunshu_images2" src="@/static/index2/list_02.png" mode=""></image>
				<view class="index1_myyunshu">{{$t('我的订单')}}</view>
			</view>
		</view> -->
		<!-- 消息列表文字 -->
		<view class="index1_message">
			<image style="width: 32rpx;height: 32rpx;margin-right: 8rpx;" src="@/static/index2/22261x.png" mode="">
			</image>
			<span>{{$t('商品推荐')}}</span>
		</view>
		<!-- 模块 -->
		<view class="list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" refresher-enabled="true"
				:refresher-triggered="freshIsShow" @scrolltolower="lower" @refresherrefresh="fresh"
				@refresherrestore="store"
				refresher-background="background: linear-gradient(90deg, #82B0FC -2%, #90DAE6 105%);">
				<view v-if="arr.length>0" class="index1_block" :class="{'ru_style': lang === 'ru'}"
					v-for="(item,index) in arr" :key="index">
					<!-- 标签 -->
					<view class="label_wrap">
						<view class="label_item label_item1">
							{{item.data.is_express_price === "1" ? $t('不含运费') : $t('含运费') }}
						</view>
						<view class="label_item label_item2">
							{{getName(item.data.pay_type)}}
						</view>
					</view>
					<!-- 公司名称 -->
					<view class="index1_images">
						<image style="width: 100rpx;height: 100rpx;border-radius: 100rpx;"
							:src="setImage(item.release_user.avatar)" mode=""></image>
						<view class="index1_images1">
							<view class="index1_title1" @longpress="onLongPress(item.user)" @touchend="onTouchEnd">
								{{lang=='zh'?item.release_user.username:item.release_user.username_ru}}
							</view>
							<view class="index1_imagescx2" v-if="item.data.category">{{$t('发货地')}}:
								{{(lang=='zh'?item.data.departure.mergename:item.data.category.name_ru) || "-"}}
							</view>
						</view>
					</view>
					<!-- 货物信息 -->
					<view class="index1_goods">
						<view class="top_goods">
							<view class="flex-item">
								<view
									style="width: 100%;min-height: 28rpx;display: flex;justify-content: space-between;">
									<view style="font-size: 28rpx;line-height: 1.2;color: #000000;">{{$t('货物信息')}}
									</view>
								</view>
								<view class="index1_goods1">{{$t('货物名称')}}</view>
								<view class="goods_text">
									{{(lang=='zh' ? item.data.name : item.data.name_ru) || '-'}}
								</view>
								<view class="index1_goods1">{{$t('单件重量')}}</view>
								<view class="goods_text">{{item.data.goods_weight || '-'}}kg</view>
							</view>
							<view style="margin-left: 10rpx;display: flex;justify-content: flex-end;flex: none;">
								<image style="width: 350rpx;height: 196rpx;border-radius: 32rpx;"
									:src="setImage(item.data.logo)" mode=""></image>
							</view>
						</view>
						<view class="index1_goods2">
							<view class="index1_goods2_block">
								<view :class="lang=='zh'?'index1_goods2zh':'index1_goods2ru'">{{$t('起批数量')}}</view>
								<view style="font-size: 28rpx;color: #000000;">
									<span>
										{{item.data.goods_num || 0}}
									</span>
									<span
										style="font-size: 22rpx;">{{(lang=='zh' ? item.data.number_unit : item.data.number_unit_ru) || '-'}}</span>
								</view>
							</view>
							<view class="index1_goods2_block">
								<view :class="lang=='zh'?'index1_goods2zh':'index1_goods2ru'">{{$t('生产时间')}}</view>
								<view style="font-size: 28rpx;color: #000000;">
									<span>
										{{item.data.desire_speed || "-"}}
									</span>
									<span
										style="font-size: 22rpx;">{{item.data.speed_unit ? $t(item.data.speed_unit) : ""}}</span>
								</view>
							</view>
							<view class="index1_goods2_block">
								<view :class="lang=='zh'?'index1_goods2zh':'index1_goods2ru'">{{$t('尺寸信息')}}</view>
								<view style="font-size: 28rpx;color: #000000;">
									<span>
										{{item.data.l || 0}}×{{item.data.w || 0}}×{{item.data.h || 0}}
									</span>
									<span style="font-size: 22rpx;">m</span>
								</view>
							</view>
							<view class="index1_goods2_block">
								<view :class="lang=='zh'?'index1_goods2zh':'index1_goods2ru'">{{$t('单件体积')}}</view>
								<view style="font-size: 28rpx;color: #000000;">
									<span>
										{{item.data.goods_volume || 0}}
									</span>
									<span style="font-size: 22rpx;">m³</span>
								</view>
							</view>
						</view>
					</view>
					<view class="price_wrap">
						<view class="price">
							<text class="unit">{{$t('单价')}}: </text>
							<text class="num">{{item.data.desire_price || 0}}</text>
							<text>/{{(lang=='zh' ? item.data.price_unit : item.data.price_unit_ru) || $t(item.data.price_unit)}}</text>
						</view>
						<view class="time">
							<text class="unit">{{$t('发布时间')}}:</text>
							<text>{{time("S", item.data.createtime) || "-"}}</text>

						</view>
					</view>
					<view class="index1_xq4">
						<view v-if="!item.order" style="width: 196rpx;height: 60rpx;">
							<u-button :disabled="communicateDisabled" hover-class="none" style="font-size: 22rpx;"
								class="index_xq1"
								@click.stop="handeleUninterested(item,index)">{{$t('不感兴趣')}}</u-button>
						</view>

						<view style="width: 196rpx;height: 60rpx;margin-left: 21rpx;">
							<u-button :disabled="communicateDisabled" hover-class="none" style="font-size: 22rpx;"
								class="index_xq2" @click.stop="handeleWanttobuy(item.path)">{{$t('招标比价')}}</u-button>
						</view>

						<view style="width: 196rpx;height: 60rpx;margin-left: 21rpx;">
							<u-button :disabled="communicateDisabled" hover-class="none" style="font-size: 22rpx;"
								class="index_xq3" @click.stop="handeleCommunicate(item)">{{$t('即时沟通')}}</u-button>
						</view>
					</view>
				</view>
				<view v-if="arr.length===0" class="Currently-unavailable">
					<u-empty :text="$t('数据为空')" mode="list"></u-empty>
				</view>
				<view style="height: 100rpx;"></view>
			</scroll-view>
		</view>
		<vipPopup v-if="vipShow" :show="vipShow" @handeleVip="clickVipPopup" />
		<u-popup v-model="show" mode="center" border-radius="32">
			<view class="longPressTextClass">{{longPressText}}</view>
		</u-popup>
		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 792rpx;position: absolute;top: 0;z-index: 1;"
			src="@/static/index2/20241101130857.png" mode=""></image>

		<movable-area class="fb">
			<movable-view class="max" direction="vertical" x="0" y="0" :out-of-bounds="true">
				<image class="fb_img" @click="handeleFB" src="@/static/index2/index19.png" mode="widthFix">
				</image>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		createC2CConversation,
		time
	} from "@/common/public";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			vipPopup
		},
		data() {
			return {
				communicateDisabled: false,
				longPressText: '',
				show: false,
				userInfoFull: uni.getStorageSync('userInfoFull'),
				user_id: "",
				freshIsShow: true,
				scrollTop: 0,
				arr: [],
				indexID: -1,
				isShow: false,
				value: '', //输入框内容
				reason: '', //快捷选项原因
				type: 'textarea',
				height: '250rpx',
				border: true,
				autoHeight: true,
				page: 1,
				id: '',
				Current_index: '', //当前下标
				total: 0,
				limit: 20,
				vip: false,
				vipShow: false,
				lang: 'ru',
				placeholder: '@/static/order.png', // 本地占位图路径
				list: [],
			}
		},
		created() {
			console.log(this.userInfoFull)
			this.user_id = this.userInfoFull.user_id;
			this.getLang();
		},
		methods: {
			// 找货
			zhaohuo() {
				uni.navigateTo({
					url: '/pages/release/goods/form?type=2'
				})
			},
			// 找车
			zhaoche() {
				console.log(123)
				uni.navigateTo({
					url: '/pages/release/transport/zhaoche?type=2'
				})
			},
			// 找货代
			zhaohuodai() {
				uni.navigateTo({
					url: '/pages/release/crossborder/form?type=2'
				})
			},
			time,
			onLongPressorder_no(item) {
				this.show = true
				this.longPressText = item.order_no
			},
			// 松开
			onTouchEnd() {
				this.show = false
			},
			onLongPressUsername() {
				this.show = true
				if (this.lang == 'zh') {
					this.longPressText = this.userInfoFull.username
				} else {
					this.longPressText = this.userInfoFull.username_ru
				}
			},
			// 长按
			onLongPress(item) {
				this.show = true
				if (this.lang == 'zh') {
					this.longPressText = item.username
				} else {
					this.longPressText = item.username_ru
				}
			},
			// 右侧标签
			getName(num) {
				switch (num) {
					case "1":
						return this.$t("预付全款");
					case "2":
						return this.$t("预付定金");
					case "3":
						return this.$t("货到付款");
					default:
						return "";
				}
			},
			// 跳转至个人名片
			handeleCard() {
				uni.navigateTo({
					url: '/pages/tabbar/order/businessCard?id=' + this.user_id
				})
			},
			// 跳转至我的订单
			handeleMyOrder() {
				uni.navigateTo({
					url: '/pages/tabbar/order/index'
				})
			},
			// 跳转至采购计划
			handelePurchase() {
				uni.navigateTo({
					url: '/pages/tabbar/order/purchase'
				})
			},
			// 发布
			handeleFB() {
				// uni.switchTab({
				// 	url: '/pages/tabbar/release/index'
				// })
				uni.navigateTo({
					url: '/pages/release/transport/form?type=2'
				})

			},
			// 不感兴趣
			handeleUninterested(item, index) {

				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('感谢您反馈的信息，我们会努力优化推送内容。'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.communicateDisabled = true;
							let data = {
								id: item.id,
								content: '',
								reason: ''

							}
							this.$u.api.basic.setRefuse(
								data
							).then(() => {
								this.arr.splice(index, 1)
								uni.showToast({
									icon: 'none',
									title: this.$t('操作成功')
								})
								this.communicateDisabled = false
							})
						} else if (res.cancel) {}
					}
				});

			},
			// 隐藏vip弹窗
			clickVipPopup() {
				this.vipShow = false //点击vip弹窗隐藏
			},
			//招标比价
			handeleWanttobuy(path) {
				uni.navigateTo({
					url: path
				})
			},
			// 即时沟通
			handeleCommunicate(item) {
				this.communicateDisabled = true
				setTimeout(() => {
					this.communicateDisabled = false
				}, 2000)
				createC2CConversation(item.release_user.mobile, this)
			},
			// 获取vip信息
			getVip() {
				this.$u.api.user.appCheck().then(res => {
					this.vip = res.vip;
				})
			},
			// 获取数据
			getData() {

				let params = {
					user_id: this.user_id,
					page: this.page,
					limit: this.limit,
					type: 0,
				}
				this.$u.api.buyer.getPurchaseWork(params).then(res => {
					this.total = res.count;
					if (this.lang == 'zh') {
						this.list = [
							`我们为您找到了${res.count}条供应需求，期待您的报价！`
						];
					} else {
						this.list = [
							`Мы нашли для Вас ${res.count} предложений к поставкам и с нетерпением ждем Ваших запросов!`
						];
					}

					if (this.page == 1) {
						this.arr = res.list
						this.page++
						this.freshIsShow = false
					} else {
						this.arr = [...this.arr, ...res.list]
						this.page++
						this.freshIsShow = false
					}

				}).catch(() => {
					this.freshIsShow = false
				})

			},


			setImage(IMAGE) {
				if (IMAGE?.slice(-3) === 'png' || IMAGE?.slice(-3) === 'jpg') {
					return IMAGE_URL + IMAGE
				} else if (IMAGE) {
					return IMAGE
				} else {
					return HTTP_IMG_UTL + 'images-zhanweitu.png'

				}
			},
			// 下拉刷新复位
			store() {
				this.freshIsShow = false
			},
			// 下拉刷新触发
			fresh() {
				this.page = 1
				this.freshIsShow = true
				this.getData()
			},
			// 触底加载
			lower() {
				// 触底判断总条数不等于当前数据的条数则获取数据
				if (this.arr.length < this.total) {
					this.getData()
				}
			},
			handeleItem(index) {
				this.indexID = index
				if (this.lang == 'zh') {
					this.reason = this.list[index].title
				} else {
					this.reason = this.list[index].title_ru
				}
			},
			// 获取缓存lang当前语言值
			getLang() {
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
						uni.showLoading({
							title: this.$t('加载中')
						})
						Promise.all([this.getData(), this.getVip()]).then(() => {
							uni.hideLoading();
						}).catch(() => {
							uni.hideLoading();
						})
					}
				});
			},
		},

	}
</script>
<style scoped>
	.Currently-unavailable {
		width: 100%;
		height: 300rpx;
		text-align: center;
		line-height: 300rpx;
	}

	.index1-username {
		width: 100%;
		font-size: 32rpx;
		color: #FFFFFF;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		padding-right: 20rpx;
	}

	.index1_goods3ru {
		font-size: 22rpx;
		color: #999999;
		min-height: 23rpx;
		margin-bottom: 35rpx;
	}

	.index1_goods2ru {
		font-size: 22rpx;
		color: #999999;
		min-height: 23rpx;
		margin-bottom: 8rpx;
	}

	.index1_goods2zh {
		font-size: 22rpx;
		color: #999999;
		min-height: 23rpx;
		margin-bottom: 5rpx;
	}

	.numberStyle {
		width: 170rpx;
	}

	.orderText {
		width: 330rpx;
		margin-left: 15rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.orderText_ru {
		width: 230rpx;
		margin-left: 15rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		text-align: start;
	}

	.index1_title1 {
		width: 100%;
		font-size: 28rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.longPressTextClass {
		width: 650rpx;
		min-height: 100rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address-detail {
		width: 100%;
		display: flex;
		height: 22rpx;
		align-items: center;
		font-size: 22rpx;
		margin-top: 21rpx;
	}

	.list_block {
		width: 690rpx;
		flex: 1;
		overflow: hidden;
		/* height: calc(100vh - 500rpx); */
	}

	.scroll-Y {
		width: 690rpx;
		height: 100%;
		overflow: hidden;
	}

	.index1_myyunshu {
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		top: 30rpx;
		left: 30rpx;
	}

	.yunshu_images1 {
		width: 345rpx;
		height: 185rpx;
		position: relative;
		left: -13rpx;
		top: -10rpx;
	}

	.yunshu_images2 {
		width: 314rpx;
		height: 158rpx;
		position: relative;
		left: 0;
		top: 0rpx;
	}

	.index1_message {
		width: 690rpx;
		flex: none;
		display: flex;
		align-items: center;
		z-index: 2;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
		letter-spacing: 3rpx;
	}

	.index1_yunshu1 {
		width: 314rpx;
		height: 158rpx;
		border-radius: 24rpx;
		position: relative;
	}

	.index1_yunshu {
		width: 690rpx;
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 2;
	}

	.index1_headers1 {
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 16rpx;
		align-items: flex-start;
	}

	.index1_headers {
		width: 690rpx;
		height: 100rpx;
		flex: none;
		display: flex;
		align-items: center;
		margin-top: 84rpx;
		margin-bottom: 30rpx;
		z-index: 2;
		position: relative;
	}

	.index2_information {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		z-index: 2;
		justify-content: center;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.192) 100%);
		border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 1;
		border-radius: 10rpx;
	}

	.index2_information .small_bell {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.index2_information .bell_text {
		width: 580rpx;
		padding-left: 20rpx;
		color: #005299;
		font-size: 24rpx;
		line-height: 42rpx;
		border-left: 1px solid #fff;
	}

	.business {
		width: 50rpx;
		flex: none;
	}

	.header {
		width: 750rpx;
		height: 792rpx;

	}

	.index1_goods2_block {
		min-height: 66rpx;
		width: auto;
		max-width: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.index1_goods2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.index1_goods1 {
		color: #999999;
		font-size: 22rpx;
		line-height: 1;
		margin-top: 20rpx;
	}

	.index1_xq4 {
		position: absolute;
		bottom: -24rpx;
		left: 30rpx;
		width: 630rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 22rpx;
	}

	.index_xq1 {
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		color: #fff;
		background: #FF5D5D;
	}

	.index_xq2 {
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		color: #fff;
		background: #5282E6;
	}

	.index_xq3 {
		width: 196rpx;
		height: 60rpx;
		border-radius: 60rpx;
		color: #fff;
		background: #06C36E;
	}

	.index1_goods {
		width: 630rpx;
		min-height: 240rpx;
		background: #F6F7FB;
		border-radius: 32rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		margin-bottom: 20rpx;
	}

	.index1_order1 {
		min-width: 81rpx;
		height: 22rpx;
		border-radius: 22rpx;
		padding: 0 16rpx;
		background: #F32929;
		color: #FFFFFF;
		font-size: 14rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 24rpx;
	}

	.index1_order {
		width: 630rpx;
		min-height: 200rpx;
		border-radius: 32rpx;
		padding: 30rpx 30rpx 17rpx 30rpx;
		box-sizing: border-box;
		background: #F6F7FB;
		margin-top: 30rpx;

	}

	.index1_images5 {
		min-width: 118rpx;
		height: 40rpx;
		background: #06C36E;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 12rpx;

	}

	.index1_images4 {
		width: 120rpx;
		height: 40rpx;
		background: #5282E6;
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 40rpx;
		box-sizing: border-box;
		padding: 0 15rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.index1_images3 {
		width: 185rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.index1_imagescx2 {
		min-height: 32rpx;
		border-radius: 32rpx;
		background-color: #F32929;
		font-size: 22rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		display: inline-block;
		padding: 6rpx 10rpx;
		text-align: center;
		line-height: 24rpx;
	}

	.index1_images1 {
		width: 500rpx;
		min-height: 100rpx;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
	}

	.index1_images {
		width: 100%;
		min-height: 100rpx;
		display: flex;
		align-items: center;
	}

	.index1_block {
		width: 690rpx;
		min-height: 590rpx;
		border-radius: 32rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 54rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;
		margin-bottom: 70rpx;
		margin-top: 10rpx;
	}

	.index1_content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #F1F2F4;
	}
</style>
<style lang="less" scoped>
	.sub_title {
		background-color: #66b1f9;
		font-size: 24rpx;
		line-height: 40rpx;
		border-radius: 40rpx;
		padding: 0 40rpx;
		color: #fff;
		margin-top: 10rpx;
	}

	.label_wrap {
		position: absolute;
		z-index: 1;
		right: 0;
		top: -10rpx;
		display: flex;
		align-items: center;

		.label_item {
			min-width: 170rpx;
			padding: 0 20rpx;
			height: 40rpx;
			text-align: center;
			border-radius: 3rpx 32rpx 3rpx 32rpx;
			font-size: 24rpx;
			line-height: 40rpx;
		}

		.label_item1 {
			background: linear-gradient(90deg, #CCD6FF -2%, #4A70FC 105%);
			color: #005EAC;
			margin-right: 12rpx;
		}

		.label_item2 {
			background: linear-gradient(91deg, #FCF9E8 0%, #F2C376 95%);
			color: #745343;
		}
	}

	.top_goods {
		width: 100%;
		display: flex;
		align-items: flex-start;

		.flex-item {
			flex: 1;
			overflow: hidden;
		}

		.goods_text {
			color: #000000;
			font-size: 28rpx;
			font-weight: normal;
			margin-top: 10rpx;
			line-height: 1.2;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
	}

	.price_wrap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.price {
			display: inline-flex;
			flex: 1;
			align-items: flex-end;
			font-size: 24rpx;
			color: #FF0000;
			line-height: 36rpx;

			.num {
				max-width: 172rpx;
				font-size: 40rpx;
				line-height: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-flex;
			}
		}

		.time {
			flex: none;
			font-size: 20rpx;
			color: #999999;
			font-family: Alibaba PuHuiTi 3.0;
		}
	}

	.ru_style {
		.index1_goods2 {
			flex-wrap: wrap;
			align-items: flex-start;

			.index1_goods2_block {
				width: calc(50% - 10rpx);
				max-width: 50%;
				padding-right: 10rpx;
				margin-bottom: 20rpx;

				&:nth-child(2n) {
					padding-right: 0;
					padding-left: 10rpx;
				}
			}
		}

		.price {
			display: inline-flex;
			flex-wrap: wrap;

			.unit {
				width: 100%;
			}
		}

		.time {
			display: inline-flex;
			flex-direction: column;
			align-items: start;

			.unit {
				font-size: 24rpx;
			}
		}
	}

	.fb {
		width: 100%;
		height: calc(50% - 100rpx);
		font-size: 32rpx;
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 3;
		pointer-events: none;
		display: none;

		.fb_img {
			width: 100rpx;
			border-radius: 100rpx;
		}

		.max {
			right: 30rpx;
			left: auto;
			width: auto;
			height: auto;
			pointer-events: fill;
		}
	}

	.index1_ck_flex {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.index1_ck_imgblock {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70rpx;
		height: 70rpx;
		border-radius: 16rpx;

		background: rgba(255, 255, 255, 0.5);

		backdrop-filter: blur(10px);
		box-shadow: 0px 7px 8px 0px rgba(82, 130, 230, 0.5);
		position: relative;
	}

	.index1_ck_imgblock_img {
		position: relative;
		left: -6rpx;
		top: 6rpx;
	}

	.index1_ck {
		flex: none;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 2;
		// margin-top: 30rpx;
		width: 690rpx;
		height: 174rpx;
		border-radius: 32rpx;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.192) 100%);
	}

	.textBlock {
		font-size: 26rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
	}

	.textBlock_ru1 {
		font-size: 23rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
		line-height: 0.8;
		text-align: center;
		margin-bottom: -18rpx;
	}

	.textBlock_ru {
		font-size: 23rpx;
		color: #1D1D1D;
		margin-top: 16rpx;
		line-height: 0.8;
		text-align: center;

	}
</style>